<template>
  <div class="operation-log">
    <h3 class="operation-log-title">操作日志</h3>
    <div class="operation-log-wrap">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column label="序号" width="80" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="ID" prop="id" width="80" align="center"></el-table-column>
        <el-table-column label="管理员" prop="admin_name" width="120"></el-table-column>
        <el-table-column label="操作类型" prop="operation_type" width="120"></el-table-column>
        <el-table-column label="操作描述" prop="operation_desc" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作时间" width="180">
          <template slot-scope="scope">
            <div class="date-time">{{ formatDateTime(scope.row.createAt) }}</div>
          </template>
        </el-table-column>
        <el-table-column align="right" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="operation-log-footer">
      <el-pagination @current-change="currentChangeFn" background layout="prev, pager, next" :page-size="page_size"
        :pager-count="7" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { itemsOperationLog, deleteOperationLog } from "../api/index"

export default {
  data() {
    return {
      tableData: [],
      page_num: 1,
      page_size: 10,
      total: 0
    }
  },
  methods: {
    // 格式化日期时间
    formatDateTime(dateTimeStr) {
      if (!dateTimeStr) return ''
      const date = new Date(dateTimeStr)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')
      return `${year}-${month}-${day}\n${hours}:${minutes}:${seconds}`
    },
    // 删除操作日志
    handleDelete(index, row) {
      this.$confirm('您确定要删除这条操作日志吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteOperationLogFn(row.id)
      }).catch(() => { })
    },
    // 分页变化处理
    currentChangeFn(index) {
      this.page_num = index
      this.itemsOperationLogFn()
    },
    // 获取操作日志列表
    async itemsOperationLogFn() {
      let page_num = this.page_num
      let page_size = this.page_size
      let token = localStorage.getItem("AUTO_TOKEN")
      if (token) {
        await itemsOperationLog({ token, page_num, page_size })
          .then(resData => {
            if (resData.code == 200) {
              this.tableData = resData.data
              this.total = resData.total
            }
          })
          .catch(err => {
            const msg = err?.response?.data?.msg || '获取操作日志失败'
            this.$message({ type: 'error', message: msg })
          })
      } else {
        this.$message({ type: "error", message: "您还没有登录" })
      }
    },
    // 删除操作日志
    async deleteOperationLogFn(id) {
      let token = localStorage.getItem("AUTO_TOKEN")
      if (token) {
        await deleteOperationLog({ token, id })
          .then(resData => {
            if (resData.code == 200) {
              this.$message({ type: "success", message: resData.msg })
              this.itemsOperationLogFn()
            } else {
              this.$message({ type: "error", message: resData.msg })
            }
          })
          .catch(err => {
            const msg = err?.response?.data?.msg || '删除操作日志失败'
            this.$message({ type: 'error', message: msg })
          })
      } else {
        this.$message({ type: "error", message: "您还没有登录" })
      }
    }
  },
  created() {
    this.itemsOperationLogFn()
    this.$store.commit("addTab", this.$route)
  },
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(newRoute) {
        this.$store.commit("addTab", newRoute)
      }
    }
  }
}
</script>

<style lang="less">
.operation-log {
  .operation-log-title {
    padding: 20px 0px;
    color: #303133;
  }

  .operation-log-footer {
    margin-top: 15px;
    text-align: right;
  }

  .date-time {
    line-height: 1.5;
    white-space: pre-line;
  }
}
</style>